<template>
    <div id="app" v-loading="loading">
        <div class="title">
            <a class="backPage iconfont icon-icon-test" @click="$router.push('/task/accept')"></a>
            接单详情
            <div class="rightBotttom">
                <a class="iconfont icon-xiangyoujiantou-copy" style="font-size:21px;"
                    @click="hanldeQuiteNav('prve')"
                ></a>
                <a class="iconfont icon-xiangyou-copy"
                    @click="hanldeQuiteNav('next')"
                ></a>
            </div>
        </div>
        <el-form class="form" label-position="top">
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-form-item label="接单人">
                        <div class="userHead"
                            @click="$router.push(`/user/detail/${acceptLink.user_id}`)"
                        >
                            <img :src="acceptLink.avatar" class="square" />
                            {{
                                acceptLink.nick_name
                            }}
                        </div>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-form-item label="接单ID">
                        {{
                            acceptLink.id
                        }}
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-form-item label="任务ID">
                        <router-link class="blue" :to="'/task/detail?taskId=' + acceptLink.task_id">
                            {{
                                acceptLink.task_id
                            }}
                        </router-link>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-form-item label="分类">
                        {{
                            acceptLink.first_name
                        }} - 
                        {{
                            acceptLink.seconde_name
                        }}
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-form-item label="任务标题">
                        <div class="ell">
                            {{
                                acceptLink.title
                            }}
                        </div>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-form-item label="状态">
                        <font color="#acacac" v-if="acceptLink.status==1">进行中</font>
                        <font color="#acacac" v-else-if="acceptLink.status==2">待审核</font>
                        <font color="#52c41a" v-else-if="acceptLink.status==3">已完成</font>
                        <font color="#1890ff" v-else-if="acceptLink.status==4">仲裁中</font>
                        <font color="#ff3102" v-else-if="acceptLink.status==5">未通过</font>
                        <font  v-else-if="acceptLink.status==6">已关闭</font>
                        <font  v-else>-</font>
                        <el-button style="margin-left:15px;" 
                            v-if="acceptLink.status==2" 
                            @click="handleAuditShow"
                            size="mini"
                        >
                            审核
                        </el-button>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-form-item label="单价">
                        <font color="#F30">
                            {{
                                priceFormat(acceptLink.amount_actual)
                            }}
                        </font>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-form-item label="完成终端">
                        {{
                            acceptLink.complete_os
                        }}
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="4">
                <el-form-item label="任务难度">
                初级
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-form-item label="接任务时间">
                        {{
                            acceptLink.time_created ? 
                            countTrialDate(acceptLink.time_created * 1000) 
                            : '-'
                        }}
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-form-item label="完成时间">
                        {{
                            acceptLink.complete_time ? 
                            countTrialDate(acceptLink.complete_time * 1000)
                            : '-'
                        }}
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-form-item label="审核时间">
                        {{
                            acceptLink.check_time ? 
                            countTrialDate(acceptLink.check_time * 1000)
                            : '-'
                        }}
                    </el-form-item>
                </div>
            </el-col>
        </el-form>
        <el-dialog title="提示" :visible.sync="showHandle" width="500px">
            <el-form label-position="top">
                <el-form-item label="">
                    <el-radio-group 
                        v-model="auditStatus"
                        style="margin-bottom:25px;"
                    >
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="0">不通过</el-radio>
                    </el-radio-group>
                    <el-input
                        placeholder="请输入不通过理由"
                        v-if="auditStatus == 0"
                        v-model="specText"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleAuditShow">取 消</el-button>
                <el-button type="primary" @click="handleAuditAccept"
                    :loading="afirmBtnLoad"
                >确 定</el-button>
            </span>
        </el-dialog>
        <div>
            <task-step 
                mode="preview" 
                :taskSteps="taskSteps"
                :uploadBids="uploadBids"
            />
        </div>
    </div>
</template>

<script>
    import AcceptDetail from './index.js';
    export default AcceptDetail;
</script>
<style>
    .el-form{
        overflow: hidden;
    }
</style>
<style lang="scss" scoped>
.form{
  margin-top:30px;
  border-top:1px solid #FFF;
}
.titles{
  margin-top:25px;
  margin-bottom:12px;
  font-size:19px;
}
.progress{
  height:40px;
  line-height:40px;
  overflow:hidden;
  .elPr{
    vertical-align: middle;
    margin-right:13px;
  }
}
.filter{
  width:100%;
}
.other{
  margin-bottom:40px;
}
.rightBotttom{
  float:right;
  a{
    height:36px;
    line-height:36px;
    text-align:center;
    display:block;
    margin-right:25px;
    font-size:23px;
    cursor: pointer;
    border-radius:3px;
    float:left;
    color:#d9d9d9;
    &:nth-last-child(1){
      margin-right:0;
    }
  }
}
</style>